<template>
	<view class="">
		<view class="vip-con">
			<view class="cd-name">场地名称</view>
			<vipCard type='join' :item="data.info.tmember"></vipCard>
			<view class="tips">{{data.info.tmember?data.info.tmember.introduction:''}}</view>
			<view class="">
				<uv-form labelPosition="left" :model="data.form" label-width="80">
					<view class="" v-for="(item,index) in data.info.tformDynamic" :key="index">
						<form-select-vue type="vip" v-if="item.fieldType.code==5" :id="data.info.id" :index="index"
							:item='item' @resValue="resValue"></form-select-vue>
						<form-date-time-vue type="vip" v-else-if="item.fieldType.code==7" :id="data.info.id"
							:index="index" :item='item' @resValue="resValue"></form-date-time-vue>
						<formInputVue v-else type="vip" :index="index" :item='item' :id="data.info.id"
							@resValue="resValue">
						</formInputVue>
					</view>
					<view class="btn-b flex-align-end">
						<view class=" heji-box" v-if="data.info.tmember?data.info.tmember.type.code!=2:false">
							<text class="heji">合计：</text>
							<view class="">
								<text class="fuhao">￥</text>
								<text class="jiae">{{data.info.tmember.price}}</text>
							</view>
						</view>
						<view class="blue-btn" @click="join">立即加入</view>

					</view>
				</uv-form>
			</view>
		</view>
		<uv-picker ref="sexPicker" :columns="data.sexDic" keyName="value" @confirm="sexConfirm"></uv-picker>
	</view>
</template>

<script setup>
	import vipCard from "@/compoments/vip/vipCard.vue";
	import {
		ref
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import formInputVue from "../../../compoments/form/form-input.vue";
	import formDateTimeVue from "../../../compoments/form/form-dateTime.vue";
	import formSelectVue from "../../../compoments/form/form-select.vue";
	import {
		echoMemberDynamic,
		getMnumByName,
		pay,
		queryPayRes
	} from '../../../requestApi/api.js';
	const data = ref({
		id: '',
		info: [], //动态字段类型 1:单行文本  2：多行文本 3：数字 4：小数 5：单选 6：多选
		form: [],
		sexDic: [],
		sex: '',
		radiolist: [],
		checkboxList: []
	});
	const sexPicker = ref(null);
	onLoad((e) => {

		data.value.id = e.id;
		getSexDic();

		// data.value.info=e.item;

		getDetail();
	});
	//改变值
	const resValue = (e) => {
		let findIndex = data.value.form.findIndex((item) => item.index == e.index);
		if (findIndex > -1) {
			//存在
			data.value.form.splice(findIndex, 1);
			data.value.form.push(e);
		} else {
			//不存在
			data.value.form.push(e);
		}
	};
	//查询支付结果
	const getQueryPayRes = (orderId) => {
		let timer = setInterval(() => {
			queryPayRes({
				id: orderId
			}).then(res => {
				if (res.code == 200 && res.data == true) {
					clearInterval(timer);
					// uni.navigateTo({
					// 	url:`/pages/vip/addResult/addResult`
					// })
				}
			})
		}, 1000)

	};
	//立即加入
	const join = () => {


		let arrValue = data.value.form;
		let arr = [];
		for (let i = 0; i < data.value.info.tformDynamic.length; i++) {
			let item = data.value.info.tformDynamic[i];
			let findIndex = data.value.form.findIndex(va => va.index == i);
			if (item.isRequired && (findIndex == -1 || !arrValue[findIndex].value)) {

				uni.showToast({
					icon: 'none',
					title: '请填写完整信息'
				})
				return true;
			} else {
				arr.push({
					id: data.value.info.tformDynamic[i].id,
					value: findIndex > -1 ? arrValue[findIndex].value : ''
				})
			}
		}
		pay({
			formDynamicValues: arr,
			orderType: 3,
			sourceId: data.value.info.tmember.id

		}).then(res => {
			let resData = res.data.jsonObject;
			// let info=JSON.stringify(data.value.info.tmember)
			// uni.navigateTo({
			// 	url:`/pages/vip/addResult/addResult?info=${info}`
			// })
			uni.requestPayment({
				timeStamp: '' + resData.timeStamp,
				nonceStr: resData.nonceStr,
				package: resData.package,
				signType: resData.signType,
				paySign: resData.paySign,
				success(result) {
					console.log(result)
					// getQueryPayRes(res.data.orderId);
					let info = JSON.stringify(data.value.info.tmember)
					uni.navigateTo({
						url: `/pages/vip/addResult/addResult?info=${info}`
					})
				},
				fail(e) {
					// console.log('err:', e)
					uni.showToast({
						icon: 'error',
						title: '支付失败'
					})
				}
			})

		})

	};
	//打开选择性别picker
	const selectSex = () => {
		sexPicker.value.open();
	};
	//选择性别
	const sexConfirm = (e) => {
		data.value.sex = e.value[0].value;
		data.value.form.sex = e.value[0].code;
	};
	//获取性别字典
	const getSexDic = () => {
		getMnumByName({
			enumName: 'sexEnum'
		}).then(res => {
			data.value.sexDic = [res.data];
		})
	};

	//获取会员卡信息
	const getDetail = () => {
		echoMemberDynamic({
			id: data.value.id
		}).then(res => {

			res.data.tformDynamic.map(item => {
				if (item.fieldType.code == 1 || item.fieldType.code == 2) {
					item.fieldType.type = 'text'
				} else if (item.fieldType.code == 3 || item.fieldType.code == 4) {
					item.fieldType.type = 'number'
				} else if (item.fieldType.code == 5) {
					item.fieldOption = JSON.parse(item.fieldOption)
				}

			})
			data.value.info = res.data;
		})
	};
</script>

<style lang="scss">
	.vip-con {
		padding: 42rpx;

		.cd-name {
			font-size: 36rpx;
			font-weight: bold;
			color: #2C2C2C;
			margin-bottom: 14rpx;
		}

		.tips {
			margin: 22rpx 0;
			font-size: 24rpx;
			line-height: 52rpx;
			color: #A5A5A5;
		}
	}

	.heji-box {
		padding-left: 68rpx;
	}

	.heji {
		font-size: 32rpx;
		font-weight: bold;
		color: #2C2C2C;
	}

	.fuhao {
		font-size: 48rpx;
		color: #F26D61;
		font-weight: bold;
		letter-spacing: -4rpx;
	}

	.jiae {
		font-size: 72rpx;
		color: #F26D61;
		letter-spacing: -4rpx;
		font-weight: bold;
		line-height: 80rpx;
	}

	.btn-b {
		padding-bottom: 26rpx;
	}

	::v-deep .uv-form-item {
		height: 100rpx;
	}

	::v-deep .uv-input__content__field-wrapper__field {
		text-align: right !important;
	}

	::v-deep .uv-form-item__body__left__content__label {
		font-size: 28rpx;
		font-weight: bold;
		color: #1D2228;
	}

	::v-deep .uv-line {
		// border-bottom: 2rpx dashed #F5F5F5 !important;
	}
</style>